<template>
  <div class="detail">
    <!-- 导航栏 -->
    <detail-nav-bar @navBarClick="navBarClick" ref="navBar"></detail-nav-bar>
    <scroll class="wrapp" ref="scroll" @scrollPosition="contentScroll" :probe-type="3">
      <detail-swiper :top-images="topImages" @swiperLoad="swiperLoad"></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-info :detail-info="detailInfo" @imgLoad="imgLoad"></detail-goods-info>
      <detail-param-info :param-info="paramInfo" ref="params"></detail-param-info>
      <detail-comment-info :comment-info="commentInfo" @imgComLoad="ImgComLoad" ref="comment"></detail-comment-info>
      <!-- <detail-recommend-info :recommends="recommends" @itemloadImg="itemloadImg"></detail-recommend-info> -->
      <good-list :goods="recommends" ref="recommend"></good-list>
    </scroll>
    <back-top @click.native="backClick" v-show="isShow"></back-top>
    <detail-bottom-bar @addToCart="addToCart"></detail-bottom-bar>
    <!-- <toast :message="message" :show="show"></toast> -->
  </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar.vue'
import DetailSwiper from './childComps/DetailSwiper.vue'
import DetailBaseInfo from './childComps/DetailBaseInfo.vue'
import DetailShopInfo from './childComps/DetailShopInfo.vue'
import DetailGoodsInfo from './childComps/DetailGoodsInfo.vue'
import DetailParamInfo from './childComps/DetailParamInfo.vue'
import DetailCommentInfo from './childComps/DetailCommentInfo.vue'
import DetailBottomBar from './childComps/DetailBottomBar.vue'
// import Toast from '../../components/common/toast/Toast.vue'
// import DetailRecommendInfo from './childComps/DetailRecommendInfo.vue'

import Scroll from "components/common/scroll/Scroll.vue";
import GoodList from "../../components/content/goods/GoodsList.vue"
import BackTop from "components/content/backTop/BackTop.vue"

import {getDetails,Goods,Shop,GoodsParam,getRecommend} from '../../network/detail'

//导入防抖函数
// import {debounce} from '../../common/utils'

//导入混入函数
import {itemListenerMixin,backTopMixin} from '../../common/mixin'

export default {
  name:"Detail",
  data(){
    return {
      iid:null,
      topImages:[],
      goods:{},
      shop:{},
      detailInfo:{},
      paramInfo:{},
      commentInfo:{},
      recommends:[],
      themeTopY:[],
      currentIndex:-1,
      themeStatus:false,
      // message:"",
      // show:false
      // itemImgListener:null
    }
  },
  components:{
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    Scroll,
    BackTop,
    // Toast,
    GoodList,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    DetailBottomBar
    // DetailRecommendInfo
  },
  //vue 高级 操作 混入
  mixins:[itemListenerMixin,backTopMixin],
  created(){
    this.requestDate()
    // //保存传入的iid
    // this.iid = this.$route.params.iid

    // //根据iid获取detail数据
    // getDetails(this.iid)
    // .then(res => {
    //   console.log(res);
    //   //1.获取顶部轮播图图书数据
    //   this.topImages = res.result.itemInfo.topImages
    //   // console.log(this.topImages);
      
    //   //2.获取商品描述，价格等数据
    //   this.goods = new Goods(res.result.itemInfo,res.result.columns,res.result.shopInfo.services)

    //   //3.获取商家信息
    //   this.shop = new Shop(res.result.shopInfo)

    //   //4.保存商品的详情数据
    //   this.detailInfo = res.result.detailInfo

    //   //5.商品参数信息
    //   this.paramInfo = new GoodsParam(res.result.itemParams.info,res.result.itemParams.rule)

    //   //6.取出评论信息
    //   if(res.result.rate.cRate !== 0){
    //     this.commentInfo = res.result.rate.list[0]
    //   }
    // })
    // .catch(err => {
    //   console.log(err);
    // })

    // //获取推荐商品信息
    // getRecommend()
    // .then(res => {
    //    this.recommends = res.data.list
    // })
    // .catch(err => {
    //   console.log(err);
    // })
  },
  mounted(){
    //  const refresh = debounce(this.$refs.scroll.refresh,200,this)
    //  this.itemImgListener = ()=>{
    //   refresh()
    //  }
    //  this.$bus.$on('itemImageLoad',this.itemImgListener)
  },
  destroyed(){
     this.$bus.$off('itemImageLoad',this.itemImgListener)
  },
  methods:{
    imgLoad(){
      //  this.$refs.scroll.refresh()
      this.refresh()
    },
    swiperLoad(){
      this.$refs.scroll.refresh()
      // this.refresh()
    },
    ImgComLoad(){
      // this.$refs.scroll.refresh()
      this.refresh()
    },
    itemloadImg(){
      // this.$refs.scroll.refresh()
      this.refresh()
    },
    //请求页面数据的方法
    requestDate(){
    //保存传入的iid
    this.iid = this.$route.params.iid

    //根据iid获取detail数据
    getDetails(this.iid)
    .then(res => {
      // console.log(res);
      //1.获取底部轮播图图书数据
      this.topImages = res.result.itemInfo.topImages
      // console.log(this.topImages);
      
      //2.获取商品描述，价格等数据
      this.goods = new Goods(res.result.itemInfo,res.result.columns,res.result.shopInfo.services)

      //3.获取商家信息
      this.shop = new Shop(res.result.shopInfo)

      //4.保存商品的详情数据
      this.detailInfo = res.result.detailInfo

      //5.商品参数信息
      this.paramInfo = new GoodsParam(res.result.itemParams.info,res.result.itemParams.rule)

      //6.取出评论信息
      if(res.result.rate.cRate !== 0){
        this.commentInfo = res.result.rate.list[0]
      }

      // this.$nextTick(()=>{//不准,非常不准
      //   setTimeout(()=>{
      //     this.themeTopY = []
      //     this.themeTopY.push(0)
      //     this.themeTopY.push(this.$refs.params.$el.offsetTop+35)
      //     this.themeTopY.push(this.$refs.comment.$el.offsetTop+40)
      //     this.themeTopY.push(this.$refs.recommend.$el.offsetTop+40)
      //   },800)
      // })
    })
    .catch(err => {
      console.log(err);
    })

    //获取推荐商品信息
    getRecommend()
    .then(res => {
       this.recommends = res.data.list
    })
    .catch(err => {
      console.log(err);
    })

    },

    navBarClick(index){
      // console.log(index)
      this.themeTopY = []
      this.themeTopY.push(0)
      this.themeTopY.push(this.$refs.params.$el.offsetTop+35)
      this.themeTopY.push(this.$refs.comment.$el.offsetTop+40)
      this.themeTopY.push(this.$refs.recommend.$el.offsetTop+40)
      this.$refs.scroll.scrollTo(0,-this.themeTopY[index],200)
    },

    contentScroll(position){
      // backTop
      this.isShow = (position.y < -1500) ? true : false
      if(!this.themeStatus){
        this.themeTopY = []
        this.themeTopY.push(0)
        this.themeTopY.push(this.$refs.params.$el.offsetTop+35)
        this.themeTopY.push(this.$refs.comment.$el.offsetTop+40)
        this.themeTopY.push(this.$refs.recommend.$el.offsetTop+40)
        this.themeStatus = true
      }
      let positionY = -position.y
      for(let i = 0;i<this.themeTopY.length;i++){
        if((this.currentIndex !== i) && ((i < this.themeTopY.length-1 && positionY >= this.themeTopY[i] && positionY < this.themeTopY[i+1]) || (i === this.themeTopY.length -1 && positionY >= this.themeTopY[i]))){
          this.currentIndex = i
          this.$refs.navBar.currentIndex = this.currentIndex
          this.themeStatus = false
        }
      }
    },
    addToCart(){
      //获取购物车需要展示的信息
      const product = {}
      product.image = this.topImages[0]
      product.title = this.goods.title
      product.desc = this.goods.desc
      product.price = this.goods.realPrice
      product.iid = this.iid
      //将商品添加到购物车里面
      // console.log(product);
      this.$store.dispatch('addCart',product)//该dispatch方法会放回Promise对象 当商品添加到购物车之后才弹出toast
      .then(res => {
        // this.message = res
        // this.show = true
        // setTimeout(()=>{//定时器
        //   this.message = ""
        //   this.show = false
        // },1500)
        this.$toast.show(res,1500)
      })
      .catch(err => {
        console.log(err)
      })
      
    }
  },
  watch:{
    $route(){
      this.requestDate()
      this.$router.go(0)
    }
  },
  updated(){
    // this.themeTopY = []
    // this.themeTopY.push(0)
    // this.themeTopY.push(this.$refs.params.$el.offsetTop)
    // this.themeTopY.push(this.$refs.comment.$el.offsetTop)
    // this.themeTopY.push(this.$refs.recommend.$el.offsetTop)
  }
}
</script>

<style scoped>
  .detail {
    height: 100vh;
    padding-top: 46px;
  }
  .wrapp {
    height: calc(100% - 49px);
    overflow: hidden;
    /* background-color: pink; */
  }
</style>